<template>
    <Row :gutter="8">
        <Col span="16">
            <Card>
                <p slot="title">
                    <Icon type="ios-film-outline"></Icon>
                    网页库
                </p>
                <br>
                <Row :gutter="8">
                    <Col span="8">&nbsp;</Col>
                    <Col span="8">
                        <Input v-model="keywords" @keyup.enter.native="handleSearch(1)" placeholder="请输入关键字">
                            <Icon type="ios-search-strong" slot="prepend" style="padding:0px 10px;"></Icon>
                        </Input>
                    </Col>
                    <Col span="8">&nbsp;</Col>
                </Row>
                <br>
                <br>
                <Row :gutter="8">
                    <Col span="24">
                        <Page @on-change="changePage" :current="page.current" :total="page.total" :page-size="page.pagesize" show-total show-elevator></Page>
                    </Col>
                </Row>
                <br>
                <Row :gutter="16">
                    <Col span="6" v-for="(item, index) in data" :key="index">
                        <Card style="width:100%;text-align:center;margin-bottom:15px;">
                            <div @click="handleFormdata (item.webpagesid,item.url,item.title,item.remark,item.picture,item.username,item.sn)" style="cursor:pointer;">
                                <a :href="item.url" target="_blank">
                                    <img style="max-width:100%;max-height:38px;" :src="serverpath+item.picture">
                                    <h3>{{item.title}}</h3>
                                </a>
                                <div style="color:gray;">No.{{item.sn}},by {{item.username}}</div>
                            </div>
                        </Card>
                    </Col>
                </Row>
            </Card>
        </Col>

        <Col span="8">
            <Card>
                <p slot="title">
                    <Icon type="ios-film-outline"></Icon>
                    编辑
                </p>
                <br>
                <Row :gutter="8">
                    <Col span="4">&nbsp;</Col>
                    <Col span="16" style="text-align:center;cursor:pointer;">
                        <div @click="handleClickPic">
                            <img style="max-width:100%;max-height:38px;" :src="formValidate.picture_path"/>
                        </div>
                        <div style="font-size:11px;color:gray;">
                            推荐尺寸：138 X 38
                        </div>
                        <input id="webpagepicture" @change="handleChangePic" name="webpagepicture" type="file" accept="image/png,image/gif,image/jpeg" style="display:none;"/>
                    </Col>
                    <Col span="4">&nbsp;</Col>
                </Row>
                <br>
                <Row :gutter="8">
                    <Col span="24">
                        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                            <FormItem label="ID" prop="webpagesid">
                                <Input v-model="formValidate.webpagesid" placeholder="ID不可编辑" disabled></Input>
                            </FormItem>
                            <FormItem label="网页地址" prop="url">
                                <Input v-model="formValidate.url" placeholder="请输入网页地址"></Input>
                            </FormItem>
                            <FormItem label="标题" prop="title">
                                <Input v-model="formValidate.title" placeholder="请输入标题"></Input>
                            </FormItem>
                            <FormItem label="描述" prop="remark">
                                <Input v-model="formValidate.remark" type="textarea" :autosize="{minRows: 12,maxRows: 25}" placeholder="请输入描述信息"></Input>
                            </FormItem>
                            <FormItem label="序号" prop="sn">
                                <Input type="number" v-model="formValidate.sn" placeholder="请输入序号"></Input>
                            </FormItem>
                            <FormItem>
                                <Button type="primary" @click="handleSubmit('formValidate')" :loading="save_loading">保存</Button>
                                <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                            </FormItem>
                        </Form>
                    </Col>
                </Row>
            </Card>
        </Col>
    </Row>
</template>

<script>
export default {
    name: 'webpage',
    data () {
        return {
            serverpath:'',
            key:'title',
            keywords:'',
            page: {
                total: 0,
                current: 1,
                pagesize: 8,
                //原代码为  key: 'username', 但不符合通用规则,修改成id为key,如有需要可以改正
                key: 'sn',
                order: 'asc',
                pagesizeopts: [8, 16, 32, 64, 128, 1024]
            },
            data: [],
            save_loading:false,
            formValidate: {
                webpagesid:''
                ,url: ''
                ,title: ''
                ,remark: ''
                ,picture: ''
                ,username: ''
                ,sn: 1
                ,picturefile: null//图片文件对象
                ,picture_path: ''
            },
            ruleValidate: {
                url: [
                    { required: true, message: '网页地址不能为空', trigger: 'blur'  }
                ]
                ,
                title: [
                    { required: true, message: '标题不能为空', trigger: 'blur'  }
                ]
                ,
                remark: [
                    { required: true, message: '请输入描述', trigger: 'blur' },
                    { type: 'string', max: 100, message: '描述不能超过100个字', trigger: 'blur' }
                ]
            },
            table: {
                loading:true,
                selection:[],
                keywords: ''
            }
        };
    },
    methods: {
        handleSubmit (name) {
            this.save_loading = true;
            let self = this;
            let myname = localStorage.getItem('user');
            //修改别人的数据情况
            if(self.formValidate.webpagesid
                && self.formValidate.webpagesid.length>0
                && myname!=self.formValidate.username){
                    self.save_loading = false;
                    self.$Message.error('请不要修改队友的数据!');
                    return false;
            }
            this.$refs[name].validate((valid) => {
                if (valid) {
                    let param = new FormData(); //创建form对象
                    param.append('webpagesid',self.formValidate.webpagesid);//ID
                    param.append('url',self.formValidate.url);//网页地址
                    param.append('title',self.formValidate.title);//标题
                    param.append('remark',self.formValidate.remark);//描述
                    param.append('picture',self.formValidate.picture);//图片
                    param.append('username',self.formValidate.username);//用户名
                    param.append('sn',self.formValidate.sn);//序号
                    param.append('file',self.formValidate.picturefile);//图片文件
                    self.$axios.post(self.$util.server+'webpages/save',  param, {
                        headers: {
                            "authorization": localStorage.getItem("authorization"),
                            "Content-Type":"multipart/form-data"
                        }
                    }).then(function(response) {
                        self.save_loading = false;
                        if(response.data.ok){
                            self.$Message.success('保存成功!');
                            self.handleSearch(1);
                        }else{
                            self.$Message.error('保存失败，请检查url是否已存在!');
                        }
                    }).catch( function(response) {
                        self.$Message.error('保存失败，请检查输入内容!');
                        console.log(response)
                    });
                } else {
                    self.save_loading = false;
                    self.$Message.error('内容验证不通过，请检查输入内容!');
                }
            })
        },
        handleFormdata (webpagesid,url,title,remark,picture,username,sn) {
            this.formValidate.webpagesid = webpagesid;//ID
            this.formValidate.url = url;//网页地址
            this.formValidate.title = title;//标题
            this.formValidate.remark = remark;//描述
            this.formValidate.picture = picture;//图片
            this.formValidate.username = username;//用户名
            this.formValidate.sn = sn;//序号
            this.formValidate.picture_path = this.$util.server + picture;
        },
        handleReset (name) {
            this.$refs[name].resetFields();
        },
        handleSearch (topage) {
            //初始化列表
            let self = this;
            self.table.loading = true;//loading效果
            let size = this.page.pagesize;
            if(topage) this.page.current = topage;
            let page = this.page.current-1;
            console.log(page)
            let sort = this.page.key + ',' + this.page.order;
            if(this.page.order=='normal'){ sort = 'sn, asc';}
            let key = this.key;
            let keywords = this.keywords;

            this.$axios.get(self.$util.server+'webpages/pagedata', {
                params:{
                    size: size,
                    page: page,
                    sort: sort,
                    key: key,
                    keywords: keywords
                },
                headers: {
                    "authorization": localStorage.getItem("authorization"),
                    "Content-Type":"application/json;charset=utf-8"
                }
            }).then(function(response) {
                if(response.data.total>0) {
                    self.page.total = response.data.total;
                    self.data = response.data.rows;
                    self.$Loading.finish();
                }else{
                    self.page.total = 0;
                    self.data = [];
                }
            }).catch( function(response) {
                console.log(response)
            });
        },
        handleClickPic() {
            document.getElementById('webpagepicture').click();
        },
        handleChangePic(e) {
            let file=e.target.files.item(0);
            this.formValidate.picturefile = file;
            let local_pic_path = window.URL.createObjectURL(file);
            this.formValidate.picture_path = local_pic_path;
        },
        changePage(current){
            this.page.current = current;
            this.handleSearch();
        },
        handleInit () {
            //用户名
            this.formValidate.username = localStorage.getItem('user');
            this.serverpath = this.$util.server;
            //初始化表单
            if(!this.formValidate.picture) this.formValidate.picture_path = this.$util.server + "data/webpages/logo.png";
            //初始化查询
            this.handleSearch()
        }
    },
    mounted () {
        this.handleInit();
    }

};
</script>
